<template>
	<view>
		<view class="PT_3 PLR_3 bg_fff top">
			<view class="flex_rowL">
				<image @click="$refs.showRight.open()" class="W_4vw" src="../../static/tab3_icon.png" mode="widthFix">
				</image>
				<view class="fontS_18 PL_2 font_weight_bold">
					{{iconName}}/USDT
				</view>
			</view>
			<view class="PTB_2 flex_row_between">
				<view class="">
					<view :class="(currentItem.close-currentItem.open)>0?'color_up':'color_down'"
						class="color_up font_weight_bold fontS_24">
						${{Number(currentItem.close).toFixed(2)}}
					</view>
					<view class="flex_rowL">
						<view class="fontS_10 color_gray">
							≈{{((currentItem.close)*rate).toFixed(2)}}CNY
						</view>
						<view :class="(currentItem.close-currentItem.open)>0?'color_up':'color_down'"
							class="fontS_10 PL_1">
							{{(currentItem.close-currentItem.open)>0?'+':''}}{{((currentItem.close-currentItem.open)/currentItem.open*100).toFixed(2)}}%
						</view>
					</view>
				</view>
				<view class="fontS_12 flex_col_between">
					<view class="flex_row_between W_40vw">
						<view class="color_gray">
							最高价
						</view>
						<view class="font_weight_bold">
							{{Number(currentItem.high).toFixed(2)}}
						</view>
					</view>
					<view class="flex_row_between W_40vw PT_1">
						<view class="color_gray">
							最低价
						</view>
						<view class="font_weight_bold">
							{{Number(currentItem.low).toFixed(2)}}
						</view>
					</view>
				</view>

			</view>

		</view>

		<view class="bg_fff ">
			<view class="flex_row_around PB_3">
				<view @click="tabClick(index,item.key)" v-for="(item,index) in timeArr" :key='index'
					:class="idx==index?'tab_ac':''" class="fontS_12 color_gray PB_1">
					{{item.label}}
				</view>
			</view>

			<scroll-view scroll-x="true">
				<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts"
					class="echarts" style="width: 100vw;height: 45vh;">
				</view>
			</scroll-view>


		</view>

		<view class="bg_fff PLR_3">

			<view class="flex_row_between">
				<view class="color_gray fontS_14 PB_2">
					撮合账户：{{Number(user.money).toFixed(2)}} KSA
				</view>

				<view class="fontS_14 PB_2" style="color: #dd6c78;">
					{{currentTime}}
				</view>
			</view>
			<view class="flex_row_between">
				<view class="color_gray fontS_14 PB_2">
					买入数量
				</view>
				<view class="PTB_1 B_radius_5 flex_rowL PLR_3 W_50vw" style="border: 1px solid gray;">
					<input class="fontS_14" v-model="moreNum" type="number" :placeholder="'限额1-'+fee" />
					<view class="pub_color font_weight_bold">
						KSA
					</view>
				</view>
			</view>
			<view class="flex_row_between">
				<view class="fontS_14">
					预计收益：{{moreNum*inRate/100}} KSA
				</view>
			</view>

			<!-- 			<view class="flex_row_between">
				<view class="W_80vw">
					<cmd-progress :show-info="false" :percent="parNum || 0"></cmd-progress>
				</view>

				<view class="P_1 flex_rowC B_radius_circle font_weight_bold WH_10vw fontS_16"
					style="border: 2px solid #000000;">
					{{payNum}}s
				</view>
			</view> -->
			<view class="flex_row_around PTB_3" v-if="payNum<=50">
				<view @click="doMore()" class="color_bgdown PTB_2 PLB PLR_10 B_radius_5 color_fff fontS_18">
					撮涨
				</view>
				<view @click="doLess()" class="color_bgup PTB_2 PLB PLR_10 B_radius_5 color_fff fontS_18">
					撮跌
				</view>
			</view>
			<view class="flex_row_around PT_3" v-else>
				<view @click="doLessNO" class="bg_gray PTB_2 PLB PLR_10 B_radius_5 color_fff fontS_18">
					撮涨
				</view>
				<view @click="doLessNO" class="bg_gray PTB_2 PLB PLR_10 B_radius_5 color_fff fontS_18">
					撮跌
				</view>
			</view>
		</view>

		<view class="bg_fff ">
			<view class="flex_row_around">
				<!-- <view @click="tapClick(0)" :class="idx1==0?'tab_ac':''" class="font_weight_bold fontS_16 P_2">
					深度
				</view>
				<view @click="tapClick(1)" :class="idx1==1?'tab_ac':''" class="font_weight_bold fontS_16 P_2">
					持仓记录
				</view> -->
				<view @click="tapClick(2)" :class="idx1==2?'tab_ac':''" class="font_weight_bold fontS_16">
					撮合记录
				</view>
			</view>

			<view v-if="idx1==0" class="">
				<view class="flex_row_around PTB_2 fontS_10 color_gray">
					<view class="">
						买盘
					</view>
					<view class="">
						数量
					</view>
					<view class="">
						价格
					</view>
					<view class="">
						数量
					</view>
					<view class="">
						卖盘
					</view>
				</view>
				<view class="flex_rowL">
					<view class="W_50vw PL_4 PR_2 fontS_10">
						<view v-for="(item,index) in birds" :key='index' class="flex_row_between PTB_1">
							<view class="color_gray">
								{{index}}
							</view>
							<view class="font_weight_bold">
								{{(birds[index][1]).toFixed(2)}}
							</view>
							<view class="color_up">
								{{birds[index][0]}}
							</view>
						</view>
					</view>
					<view class="W_50vw PL_2 PR_4 fontS_10">
						<view v-for="(item,index) in asks" :key='index' class="flex_row_between PTB_1">
							<view class="color_down">
								{{asks[index][0]}}
							</view>
							<view class="font_weight_bold">
								{{(asks[index][1]).toFixed(2)}}
							</view>
							<view class="color_gray">
								{{index}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-else class="">
				<scroll-view style="height: 50vh;" scroll-y="true">
					<view @click="uOpenWin('./zhuDet?info='+JSON.stringify(item))" class="PTB_2 PLR_2"
						v-for="(item,i) in cangList" :key='i'>
						<view class="flex_row_between">
							<view :class="item.action_code==1?'color_up':'color_down'"
								class="font_weight_bold fontS_16 flex_rowL">
								<view>
									{{item.action_code==1?'撮涨':'撮跌'}}
								</view>
								<view class="PL_1 pub_color">
									{{item.action_money}}
								</view>
								<view class="fontS_10 pub_color PR_1" style="padding-top: 0.8vw;">
									KSA
								</view>
								<view class="">
									{{item.status_text}}
								</view>
							</view>


							<view :class="item.action_code==1?'color_up':'color_down'"
								class="font_weight_bold fontS_16 flex_rowL">
								{{item.bonus}}
								<view class="fontS_10 pub_color PR_1" style="padding-top: 0.8vw;">
									KSA
								</view>
							</view>
						</view>

						<view class="flex_row_between color_gray">
							<view class="fontS_10 color_gray">
								{{item.issue && Number(item.issue.start_price).toFixed(2)}}
								-
								{{item.issue && Number(item.issue.end_price).toFixed(2)}}
							</view>
							<view class="font_weight_bold">
								币种：{{item.base_currency.toUpperCase()}}
							</view>
						</view>
						<view class="flex_row_between color_gray">
							<view class="fontS_10 color_gray">
								{{item.start_time}}
							</view>
							<view class="fontS_10">
								{{item.end_time}}
							</view>
						</view>
					</view>
				</scroll-view>


			</view>
		</view>





		<uni-drawer :width="300" ref="showRight" mode="left" :mask-click="true">
			<scroll-view class="PLR_2" style="height: 100%;background-color: #0f1f2f;" scroll-y="true">
				<view class="PT_6 PB_8 color_fff">
					周期
				</view>
				<view @click="listClick(item,i)" class="PTB_2 color_fff flex_row_between" v-for="(item,i) in drawerList"
					:key='i'>
					<view class="flex_rowL">
						<view class="font_weight_bold">
							{{item.name}}
						</view>
						<view class="color_gray">
							/USDT
						</view>
					</view>
					<view class="color_up">
						{{item.name=='USDT'?'1':item.num}}
					</view>
				</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>


<script>
	const upColor = '#58c087';
	const downColor = '#e66e6d';

	// var pako = require('../../static/utils/js_sdk/pako/pako.js');
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue";
	export default {
		components: {
			cmdProgress
		},
		data() {
			return {
				socketTask: null,
				// 确保websocket是打开状态
				is_open_socket: false,
				option: {},
				birds: [],
				asks: [],
				chartData: {
					"categories": [],
					"series": [{
						"name": "上证指数",
						"data": []
					}]
				},
				idx: 0,
				idx1: 2,
				idx2: 0,
				idx2s: '60s',
				timeArr: [{
						label: '1分钟',
						key: '1min'
					},
					{
						label: '15分钟',
						key: '15min'
					},
					{
						label: '30分钟',
						key: '30min'
					},
					{
						label: '1小时',
						key: '60min'
					},
					{
						label: '1天',
						key: '1day'
					},
				],
				kTime: '1min',
				timer: '',
				numTimer: '',
				cangList: [],
				page: 1,
				showText: '',
				state: true,
				user: {},
				icon: '',
				iconName: '',
				moreNum: '',
				drawerList: [],
				currentItem: {},
				rate: '',
				parsent: '',
				list: [],
				payNum: 0,
				isDisable: false,
				tosMsg: '停止撮合',
				data3: [],
				data4: [],
				parNum: '',
				inRate: '',
				hasSocket: getApp().globalData.klineHasSocket,
				fee: '',
				currentTime: "",
				currentTimer: 0,
			}
		},
		onLoad() {
			this.getRate();
			this.getBilist();
			// this.getDeep();
			this.getUser();
			this.getSounds();
			this.getOnRate();
			this.getList();
			this.getFee();
			this.getCoin();
		},
		onShow() {
			// this.getSounds();
			// this.getOnRate();
			// this.getRate();
			// this.getBilist();
			// this.getUser();
			// this.getList()
			// this.getFee()
		},
		onHide() {
			// clearInterval(this.timer);
			// clearInterval(this.numTimer)
		},
		// onReachBottom() {
		// 	if (this.state) {
		// 		this.showTxt = '加载中...';
		// 		this.page++ 
		// 		this.getList();
		// 	}
		// },
		onPullDownRefresh() {
			this.getSounds();
			this.getOnRate();
			this.getRate();
			this.getBilist();
			// this.getDeep();
			this.getUser();
			this.getList();
			this.getFee()
			uni.stopPullDownRefresh();
		},
		methods: {
			getFee() {
				let _this = this;
				this.$req('common/getConfigByName', {
					name: 'bet_max_money'
				}, function(res) {
					_this.fee = res.data;
				})
			},
			getOnRate() {
				let _this = this;
				this.$req('common/getConfigByName', {
					name: 'bonus_prop'
				}, function(res) {
					_this.inRate = res.data;
				})
			},
			getSounds() {
				let _this = this;
				this.$request('index/getDateTime', {}, function(res) {
					_this.currentTimer = res.data.datetime;
					_this.payNum = _this.currentTimer % 60;
					_this.numUp();
				})
			},
			unzip(key) {
				console.log(key)
				// 将二进制字符串转换为字符数组
				var charData = key.split('').map(function(x) {
					return x.charCodeAt(0);
				});
				console.log('压缩后的文件大小:', charData.join(","))

				// 将数字数组转换成字节数组
				var binData = new Uint8Array(charData);

				// 解压
				var data = pako.inflate(binData);

				// 将GunZip ByTAREAR转换回ASCII字符串
				key = String.fromCharCode.apply(null, new Uint16Array(data));

				//unescape(str)  --->解压后解码，防止中午乱码
				return unescape(key);
			},
			getCoin() {
				let _this = this
				uni.onSocketMessage(function(info) {
					if (JSON.parse(info.data).type == 'onMessage' && JSON.parse(info.data).data.period == _this
						.kTime) {
						let dataIns = JSON.parse(info.data).data.content;
						_this.data3 = [];
						dataIns.forEach((item, i) => {
							_this.data3.push([
								_this.timestampToTime(item.id),
								Number(item.open),
								Number(item.close),
								Number(item.low),
								Number(item.high),
								Number(item.vol)
							]);
						})
						_this.currentItem = dataIns[0];
						_this.data3 = _this.data3.reverse()
						_this.initData()
					}
				})
			},
			clickRequest() {
				if (this.is_open_socket) {
					// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
					this.socketTask.send({
						data: "请求一次发送一次message",
						async success() {
							console.log("消息发送成功");
						},
					});
				}
			},

			initData(rawData) {
				let _this = this;
				var data = this.splitData(JSON.parse(JSON.stringify(_this.data3)));
				_this.option = {
					animation: false,
					legend: {
						show: false,
						bottom: 10,
						left: 'center',
						data: []
					},
					tooltip: {
						show: true,
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						borderWidth: 1,
						borderColor: '#2c2e43',
						padding: 10,
						textStyle: {
							color: '#fff'
						},
						position: function(pos, params, el, elRect, size) {
							const obj = {
								top: 10
							};
							//console.log(params)
							obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
							return obj;


						}
					},
					axisPointer: {
						link: [{
							xAxisIndex: 'all'
						}],
						label: {
							backgroundColor: '#777'
						}
					},
					visualMap: {
						show: false,
						seriesIndex: 1,
						dimension: 2,
						pieces: [{
								value: 1,
								color: "#ec4d4d"
							},
							{
								value: -1,
								color: "#46da70"
							}
						]
					},
					grid: [{
							left: '0%',
							right: '17%',
							height: '68%',
							top: '4%',
							borderWidth: '0'
						},
						{
							left: '0%',
							right: '17%',
							top: '80%',
							height: '13%'
						}
					],
					xAxis: [{
							show: true,
							type: 'category',
							data: data.categoryData,
							scale: true,
							symbol: "none",
							boundaryGap: [0, 1],
							axisLine: {
								show: true,
								onZero: false,
								lineStyle: {
									color: '#2c2e43', // 改变x轴颜色
								},
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: "#2c2e43"
								}
							},
							min: 'dataMin',
							max: 'dataMax',
							axisPointer: {
								z: 100
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: '#b7bacb'
								},
							}
						},
						{
							type: 'category',
							show: true,
							gridIndex: 1,
							data: data.categoryData,
							scale: true,
							boundaryGap: true,
							axisPointer: {
								show: true,
								type: 'line',
								label: {
									show: false
								},
							},
							axisLine: {
								onZero: true

							},
							axisTick: {
								show: true
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: "#2c2e43"
								}

							},
							axisLabel: {
								show: false
							},
							min: 'dataMin',
							max: 'dataMax'
						}
					],
					yAxis: [{
							scale: true,
							position: 'right',
							splitArea: {
								show: false
							},
							axisLine: {
								onZero: false,
								lineStyle: {
									color: '#2c2e43', // 改变x轴颜色
								},
							},
							axisLabel: {
								show: true,
								color: 'red',
								textStyle: {
									color: '#b7bacb'
								}
							},
							splitLine: {
								lineStyle: {
									color: "#2c2e43"
								}
							},
						},
						{
							scale: true,
							gridIndex: 1,
							splitNumber: 2,
							axisLabel: {
								show: false
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							},

						}
					],
					dataZoom: [{
							type: 'inside',
							xAxisIndex: [0, 1],
							start: 75,
							end: 100
						},
						{
							show: true,
							xAxisIndex: [0, 1],
							type: 'inside',
							top: '83%',
							start: 75,
							end: 100
						}
					],
					series: [{
							name: '日K',
							type: 'candlestick',
							data: data.values,
							symbol: 'none',
							itemStyle: {
								color: upColor,
								color0: downColor,
								borderColor: upColor,
								borderColor0: downColor
							},
							markLine: {
								symbol: ['none', 'none'],
								precision: 1,
								label: {
									show: true,
									color: data.volumes.slice(-1)[0][2] == 1 ? downColor : upColor,
									backgroundColor: "#131838",
									// borderColor:"#fff",
									// borderWidth:1,
									// borderRadius:15,
									// padding: [4, 5, 4, 5]
								},
								lineStyle: {
									color: data.volumes.slice(-1)[0][2] == 1 ? downColor : upColor,
								},
								data: [{
									name: 'real-time',
									yAxis: data.values.slice(-1)[0][1]
								}]
							}
						},
						{
							name: 'Volume',
							type: 'bar',
							xAxisIndex: 1,
							yAxisIndex: 1,
							data: data.volumes
						},

						{
							name: 'MA5',
							type: 'line',
							symbol: "none",
							data: _this.calculateMA(5, data),
							smooth: true,
							lineStyle: {
								opacity: 1,
								width: 1,
								color: '#7d8764'
							}
						},
						{
							name: 'MA10',
							type: 'line',
							symbol: "none",
							data: _this.calculateMA(10, data),
							smooth: true,
							lineStyle: {
								opacity: 1,
								width: 1,
								color: '#79afb1'
							}
						},
						{
							name: 'MA20',
							type: 'line',
							symbol: "none",
							data: _this.calculateMA(20, data),
							smooth: true,
							lineStyle: {
								opacity: 1,
								width: 1,
								color: '#a592ce'
							}
						}
					]
				}
			},
			changeOption() {
				console.log('aaa')
			},
			onViewClick(options) {
				console.log(options)
			},
			popChange(e) {
				console.log(e)
				if (!e.show) {
					// clearInterval(this.timer);
				}

				// this.payNum = 0;
			},
			done1() {
				this.doClick(0)
				this.$refs.popup.open();
				// this.numUp()
			},
			done2() {
				this.doClick(0)
				this.$refs.popup2.open();
				// this.numUp();
			},
			doLessNO() {
				this.toast('停止撮合')
			},
			numUp() {
				let _this = this;
				clearInterval(_this.numTimer)
				_this.numTimer = setInterval(() => {
					_this.currentTimer++;
					_this.currentTime = _this.toTimer(_this.currentTimer);
					_this.payNum++;
					_this.parNum = Math.floor(_this.payNum / 60 * 100)

					if (_this.payNum == 50) {
						_this.isDisable = true;
						_this.tosMsg = '停止撮合'
					}
					if (_this.payNum == 60) {
						_this.payNum = 0;
						_this.tosMsg = '开奖中'
						_this.isDisable = false;
						_this.getSounds()
						_this.getList()
						_this.getUser()
					}
					if (_this.payNum == 1 || _this.payNum == 2 || _this.payNum == 3 || _this.payNum == 5 || _this
						.payNum == 10 || _this.payNum == 30) {
						_this.getList()
						_this.getUser()
					}
				}, 1000)
			},
			getRate() {
				let _this = this;
				this.$req('index/getRate', {}, function(res) {
					_this.rate = res.data.rate
				})
			},
			listClick(item, i) {
				let _this = this;
				this.icon = item.code;
				this.iconName = item.name;
				this.$refs.showRight.close();
				this.tabClick(0, '1min');
				this.getBilist();
				this.getDeep();
			},
			getBilist() {
				let _this = this;
				this.$req('currency/index', {}, function(res) {
					let list = res.data;
					let arr = [];
					_this.drawerList = []
					list.forEach((item, i) => {
						if (item.code != 'ksa' && item.code != 'usdt') {
							_this.drawerList.push({
								name: item.name,
								code: item.code,
								num: '',
								low: '',
								high: '',
								open: '',
								close: '',
								rate: ''
							})
						}

					});
					if (!_this.icon) {
						_this.icon = _this.drawerList[0].code;
						_this.iconName = _this.drawerList[0].name;
					}
					_this.getDeep()
					_this.drawerList.forEach((item, i) => {
						if (item.code != 'ksa' && item.code != 'usdt') {
							_this.getNum(item.code + 'usdt', i)
						}

					})
				})
			},
			getNum(key, i) {
				let _this = this;
				this.$req('huobi/merged', {
					symbol: key
				}, function(res) {
					_this.drawerList[i].num = res.data.close;
					_this.drawerList[i].low = res.data.low;
					_this.drawerList[i].high = res.data.high;
					_this.drawerList[i].close = res.data.close;
					_this.drawerList[i].open = res.data.open;
					_this.drawerList[i].rate =
						((res.data.close - res.data.open) / res.data.open * 100).toFixed(2);
				})
				// console.log(this.currentItem)

				if (!this.currentItem.code) {
					this.currentItem = _this.drawerList[0] || [];
				}




			},
			doPaserent(item) {
				this.parsent = ((item.close - item.open) / item.open).toFixed(2)
				// console.log(item)
			},
			doMore() {
				let _this = this;
				if (!this.moreNum) {
					this.toast('请输入交易数量')
				} else if (this.moreNum < 1) {
					this.toast('参与数量最少为1')
				} else {

					this.$req('bet/create', {
						action_code: 1,
						action_money: _this.moreNum,
						base_currency: _this.icon,
						cycle: _this.idx2s
					}, function(res) {
						_this.toast(res.msg)
						_this.moreNum = '';
						setTimeout(() => {
							// _this.$refs.popup.close()
							_this.getList()
							_this.getUser()
						}, 500)
					})
				}
			},
			doLess() {
				let _this = this;
				if (!this.moreNum) {
					this.toast('请输入交易数量')
				} else if (this.moreNum < 1) {
					this.toast('参与数量最少为1')
				} else {

					this.$req('bet/create', {
						action_code: 2,
						action_money: _this.moreNum,
						base_currency: _this.icon,
						cycle: _this.idx2s
					}, function(res) {
						_this.toast(res.msg)
						_this.moreNum = '';
						setTimeout(() => {
							// _this.$refs.popup2.close()
							_this.getList()
							_this.getUser()
						}, 500)
					})
				}

			},
			getUser() {
				let _this = this;
				this.$request('account/getByCurrency', {
					currency_id: 1
				}, function(res) {
					_this.user = res.data.account;
				})
			},
			doClick(i) {
				this.idx2 = i;
				if (i == 0) {
					this.idx2s = '60s'
				} else if (i == 1) {
					this.idx2s = '120s'
				} else if (i == 2) {
					this.idx2s = '300s'
				}
			},
			getList() {
				let _this = this;
				let num = 1;
				if (this.idx2 = 2) {
					num = ''
				}
				this.$request('bet/index', {
					page: _this.page,
					status: num
				}, (res) => {
					if (res.code == 1) {
						if (res.data.list && res.data.list.length > 0) {
							if (_this.page == 1) {
								_this.cangList = res.data.list;
							} else {
								_this.cangList = _this.cangList.concat(res.data.list)
							}
						} else {
							_this.showText = '没有更多了';
							_this.state = false;
						}
					} else {
						_this.toast(res.msg)
					}
				})
			},
			getDeep() {
				let _this = this;
				this.$req('huobi/depth', {
					symbol: _this.icon + 'usdt',
					type: 'step2',
					depth: 20
				}, function(res) {
					_this.birds = res.data.bids;
					_this.asks = res.data.asks;
				})
			},
			tapClick(i) {
				this.idx1 = i;
				this.page = 1;
				this.cangList = [];
				this.getList()
			},
			tabClick(index, key) {
				let _this = this;
				this.idx = index;
				this.kTime = key;
				uni.sendSocketMessage({
					data: JSON.stringify({
						// pang: Number(data.ping),
						// sub:'market.'+_this.icon+'usdt.kline.15min',
						// "id": "id1"

						symbol: (_this.icon ? _this.icon : 'btc') + 'usdt',
						period: _this.kTime,
						size: "200"
					}),
					complete(res) {
						console.log(JSON.stringify(res))
					}
				})

			},
			splitData(rawData) {
				var categoryData = [];
				var values = [];
				var volumes = [];
				for (var i = 0; i < rawData.length; i++) {
					categoryData.push(rawData[i].splice(0, 1)[0]);
					values.push(rawData[i])
					volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
				}
				return {
					categoryData: categoryData,
					values: values,
					volumes: volumes
				};
			},
			calculateMA(dayCount, data) {
				var result = [];
				for (var i = 0, len = data.values.length; i < len; i++) {
					if (i < dayCount) {
						result.push('-');
						continue;
					}
					var sum = 0;
					for (var j = 0; j < dayCount; j++) {
						sum += data.values[i - j][1];
					}
					result.push(+(sum / dayCount).toFixed(3));
				}
				return result;
			},
			getChartData() {
				let _this = this;
				this.$request('kline/index', {
						symbol: _this.icon + 'usdt',
						period: _this.kTime,
						size: 280,
						sec: _this.payNum
					},
					function(res) {
						let data = res.data;
						let data1 = [];
						let data2 = [];
						_this.data3 = [];
						let insData = {
							"categories": [],
							"series": [{
								data: []
							}]
						};
						let insDt = {};
						data.forEach((item, i) => {
							//console.log(item)
							// let ids = _this.timestampToTime(item.id)
							// data1.push(_this.timestampToTime(data[i].id))
							// data2.push([
							// 	item.open,
							// 	item.close,
							// 	item.low,
							// 	item.high,
							// 	item.vol
							// ]);
							_this.data3.push([
								_this.timestampToTime(item.id),
								Number(item.open),
								Number(item.close),
								Number(item.low),
								Number(item.high),
								Number(item.vol)
							]);
						})
						//console.log(_this.data3)
						_this.data3 = _this.data3.reverse();
						// _this.data3.reverse()
						// _this.splitData(_this.data3)
						//console.log(_this.splitData(_this.data3.reverse()))

						setTimeout(() => {
							_this.initData()
						}, 100)

					})
			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp * 1000);
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes();
				var s = date.getSeconds();
				if (this.kTime == '1day') {
					return Y + M + D;
				} else {
					return h + m;
				}

			},
			nowTime() {
				let now = new Date();
				let _hour = (10 > now.getHours()) ? '0' + now.getHours() : now.getHours();
				let _minute = (10 > now.getMinutes()) ? '0' + now.getMinutes() : now.getMinutes();
				let _second = (10 > now.getSeconds()) ? '0' + now.getSeconds() : now.getSeconds();
				return _hour + ':' + _minute + ':' + _second;
			},
			toTimer(timestamp) {
				var date = new Date(timestamp * 1000);
				var h = date.getHours();
				var m = date.getMinutes();
				var s = date.getSeconds();

				if (10 > h) {
					h = "0" + h
				}

				if (10 > m) {
					m = "0" + m
				}

				if (10 > s) {
					s = "0" + s
				}



				return h + ':' + m + ':' + s;
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	let is_loading = true;
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				myChart.showLoading({
					text: '',
					maskColor: 'rgba(19, 24, 56, 0.5)',
				});
				myChart.setOption(this.option);
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更

				if (myChart.getOption().dataZoom[0] != undefined) {
					newValue.dataZoom[0].start = myChart.getOption().dataZoom[0].start;
					newValue.dataZoom[0].end = myChart.getOption().dataZoom[0].end;
					newValue.dataZoom[1].start = myChart.getOption().dataZoom[1].start;
					newValue.dataZoom[1].end = myChart.getOption().dataZoom[1].end;
				}

				myChart.setOption(newValue)
				if (is_loading === true) {
					is_loading = false;
					myChart.hideLoading();
				}
			},
			onClick(event, ownerInstance) {
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style>
	.top {
		padding-top: var(--status-bar-height);
	}

	.tab_ac {
		color: #4e5ac6;
		border-bottom: 2px solid #4e5ac6;
	}

	.btn_up {
		background-color: #e13b61;
		color: #FFFFFF;
	}

	.btn_down {
		background-color: #01b08f;
		color: #FFFFFF;
	}

	.btn_no {
		border: 1px solid gray;
		color: #0066ee;
		font-weight: bold;
	}
</style>
